<template>
	<component
		:is="tagName"
		:class="classes"
		:disabled="disabled"
		@click="handleClickLink"
		v-bind="tagProps"
	>
		<Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
		<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
		<span v-if="showSlot" ref="slot">
			<slot></slot>
		</span>
	</component>
</template>

<script lang="ts">
	import { Vue, Prop, Emit, Component } from "vue-property-decorator";
	import { oneOf } from "../../utils/assist";
	import Icon from "../icon";

	const prefixCls = "ivu-btn";

	@Component({
		components: { Icon }
	})
	export default class Button extends Vue {
		@Prop({
			type: String,
			default: "default",
			validator(value: string) {
				return oneOf(value, [
					"default",
					"primary",
					"dashed",
					"text",
					"info",
					"success",
					"warning",
					"error"
				]);
			}
		})
		type!: string;
		@Prop({
			type: String,
			default: "default",
			validator(value: string) {
				return oneOf(value, ["circle", "circle-outline", "default"]);
			}
		})
		shape!: string;

		@Prop({
			type: String,
			default: "default",
			validator(value: string) {
				return oneOf(value, ["small", "large", "default"]);
			}
		})
		size!: string;

		@Prop({
			type: String,
			default: "button",
			validator(value) {
				return oneOf(value, ["button", "submit", "reset"]);
			}
		})
		htmlType!: string;
		@Prop({ type: Boolean, default: false }) loading!: boolean;
		@Prop({ type: String, default: "" }) icon!: string;
		@Prop({ type: String, default: "" }) customIcon!: string;
		@Prop({ type: Boolean, default: false }) disabled!: boolean;
		@Prop({ type: Boolean, default: false }) long!: boolean;
		@Prop({ type: Boolean, default: true }) showSlot!: boolean;
		@Prop({ type: Boolean, default: false }) ghost!: boolean;

		//如果有to属性，设置为a标签
		get tagName() {
			return this.$attrs.to ? "a" : "button";
		}
		get tagProps() {
			if (this.$attrs.to) {
				return { href: this.$attrs.to };
			} else {
				return { type: this.htmlType };
			}
		}
		get classes() {
			return [
				`${prefixCls}`,
				`${prefixCls}-${this.type}`,
				{
					[`${prefixCls}-long`]: this.long,
					[`${prefixCls}-${this.shape}`]: !!this.shape,
					[`${prefixCls}-${this.size}`]: this.size !== "default",
					[`${prefixCls}-loading`]: this.loading != null && this.loading,
					[`${prefixCls}-icon-only`]:
						!this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
					[`${prefixCls}-ghost`]: this.ghost
				}
			];
		}
		@Emit()
		// Ctrl or CMD and click, open in new window when use `to`
		handleClickLink(event: Event) {
			this.$emit("click", event);
			/* 	const openInNewWindow = event. || event.metaKey;

																								this.handleCheckClick(event, openInNewWindow); */
		}
	}
</script>

<style>
</style>